<!--寝室安排-->
<template>
  <el-card>
    <div class="mod-config">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading"
        style="width: 100%;">

        <el-table-column prop="id" header-align="center" align="center" label="自增主键">
        </el-table-column>
        <el-table-column prop="roomNumber" header-align="center" align="center" label="房间号">
        </el-table-column>
        <el-table-column prop="parentName" header-align="center" align="center" label="所属楼栋">
        </el-table-column>
        <el-table-column prop="type" header-align="center" align="center" label="类型">
        </el-table-column>
        <el-table-column prop="capacity" header-align="center" align="center" label="容纳人数">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewDetails(scope.row)">查看详情</el-button>
            <el-button type="text" size="small" @click="cleanRoom(scope.row.roomNumber,scope.row.id)">清空寝室</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!--宿舍信息-->
      <el-dialog append-to-body :title="roomName" :close-on-click-modal="false" :visible.sync="roomInfoVisible">

        <el-table :data="bedList" border v-loading="bedListLoading" @selection-change="deleteHandle"
          style="width: 100%;">
          <el-table-column type="selection" header-align="center" align="center" width="50">
          </el-table-column>
          <el-table-column prop="id" header-align="center" align="center" label="主键">
          </el-table-column>
          <el-table-column prop="studentId" header-align="center" align="center" label="学生id">
          </el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="学生姓名">
          </el-table-column>

          <el-table-column prop="roomId" header-align="center" align="center" label="宿舍号">
          </el-table-column>
          <el-table-column prop="bedId" header-align="center" align="center" label="床铺号">
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
              <el-button v-if="!scope.row.studentId" type="text" size="small" @click="occupation(scope.row.bedId)">入住</el-button>
              <el-button v-if="scope.row.studentId" type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改
              </el-button>
              <el-button v-if="scope.row.studentId" type="text" size="small" @click="deleteHandle(scope.row.id)">离寝</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-dialog>



      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="viewDetails"></add-or-update>
    </div>
  </el-card>

</template>

<script>
import { roomApi } from '@/api/baseinfo'
import { dormitoryArrangementEntityApi } from '@/api/student'
import { clone } from '@/utils'
import { is } from 'type-is'
import AddOrUpdate from './dormitoryarrangement-add-or-update'
export default {
  data() {
    return {
      dataForm: {
        sex: '',
        parentName:'',
        roomNumber:''
      },
      roomInfo: {
        roomId: 0,
        roomNum: 0,
        parentName: '',
        capacity:0
      },

      roomfield: {
          id: 0,
          studentId: '',
          roomId: '',
          bedId: ''
        },
      roomInfoVisible: false,
      bedListLoading:true,
      roomName: '',
      dataList: [],
      bedList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    //清空寝室
    cleanRoom(roomNumber,roomId){
      this.$confirm(`确定对${roomNumber}进行清空操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dormitoryArrangementEntityApi.clearRoom(roomId.toString())
        .then(()=>{
          this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
        })
      })

    },
    //安排入住
    occupation(bedId){
      let data = Object.assign( this.roomInfo,{bedId:bedId})
      this.addOrUpdateVisible=true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(data)
      })

    },
    //查看寝室入住详情
    viewDetails(room){
      if(room){
        this.roomInfo.roomId=room.id
        this.roomInfo.roomNum =room.roomNumber
        this.roomInfo.parentName=room.parentName
        this.roomInfo.capacity = room.capacity
        this.roomInfoVisible=true
      }
      this.bedList=[]

      dormitoryArrangementEntityApi.listda({roomId:this.roomInfo.roomId})
      .then(({page})=>{
        //循环添加床铺
        this.bedList=[]
        for ( let i=1;i<=this.roomInfo.capacity;i++){
          let x
          let isnull=true
          //循环已入住信息
          for(x of page.list){
            //该床铺有人
              if(x.bedId==i){
                this.bedList = this.bedList.concat(x)
                isnull=false
                break
              }
          }
          //该床铺无人
          if(isnull){
            this.bedList = this.bedList.concat(clone(this.roomfield))
            this.bedList[i-1].bedId = i
          }

        }

      })
      .finally(()=>{
        this.bedListLoading=false
      })


    },
    // 获取数据列表
    getDataList() {
      this.roomInfoVisible=false
      this.visible=false
      this.dataListLoading = true
      let params = Object.assign({
        'page': this.pageIndex,
        'limit': this.pageSize,
      },this.dataForm)
      roomApi.listDormitory(params).then(({ page }) => {

        this.dataList = page.list
        this.totalPage = page.totalCount


      }).finally(() => {
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    // 新增 / 修改
    addOrUpdateHandle(row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(Object.assign( this.roomInfo,{bedId:row.bedId}),row.id,row.studentId)
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dormitoryArrangementEntityApi.deleteda(ids)
        .then(({data})=>{
          this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.viewDetails()
              }
            })
        }).catch(res=>{
          this.$message.error(res.message)
        })

      })
    }
  }


}
</script>










